<template>
  <div>
    <!-- 查询功能模块 -->
    <div class="select">
      <div style="width: 1000px">
        <el-form ref="form" :model="selectEmployeeName" label-width="80px">
          <el-form-item label="姓名:">
            <el-input
              v-model="selectEmployeeName.empName"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门:">
            <el-input
              v-model="selectEmployeeName.empDept"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <div style="width:200px,height:100px">
            <el-form-item>
              <el-button type="success" @click="selectEmployee">查询</el-button>
              <el-button type="success" @click="add" style="margin-right: 10px"
                >添加</el-button
              >
              <el-button
                type="primary"
                style="margin-left: 20px"
                @click="upload"
                >上传<i class="el-icon-upload el-icon--right"></i
              ></el-button>
              <el-button
                type="primary"
                style="margin-left: 20px"
                @click="download"
                >下载<i class="el-icon-download el-icon--right"></i
              ></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ color: 'black', fontSize: '18px' }"
      >
        <el-table-column type="index" width="100" label="序号" fixed>
        </el-table-column>
        <el-table-column width="100" label="部门" prop="empDept" fixed>
        </el-table-column>
        <el-table-column width="100" label="姓名" prop="empName" fixed>
        </el-table-column>
        <el-table-column
          width="50"
          :label="week"
          v-for="(date, week, index) in dayObj"
          :key="index + '-label'"
        >
          <el-table-column width="50" :label="date" :prop="'day' + (index + 1)">
          </el-table-column
        ></el-table-column>
        <el-table-column
          :prop="prop"
          :label="lable"
          width="180"
          v-for="(lable, prop, index) in addialog"
          :key="index"
          highlight-current-rows
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="editInfo(scope.row)"
              style="margin: 0 20px"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteEmployee(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      :total="total"
      :employee="employee"
      @getCurrentPage="getCurrentPage"
      @getPageSize="getPageSize"
    />
    <!-- 点击添加按钮，弹出添加员工信息的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="centerAddDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in header"
          :key="index"
        >
          <el-input
            v-model="addEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注1:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks1"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注2:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks2"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注3:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks3"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog
      :title="title"
      :visible.sync="centerEditDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in header"
          :key="index"
        >
          <el-input v-model="editEmployeeName[prop]"></el-input>
        </el-form-item>
        <el-form-item label="备注1:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks1"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注2:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks2"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注3:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks3"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击上传按钮显示上传的弹框 -->
    <el-dialog
      title="上传文件"
      :visible.sync="centerUploadDialogVisible"
      width="30%"
      center
    >
      <el-upload
        drag
        style="margin-left: 100px"
        class="upload-demo"
        ref="upload"
        accept=".xlsx, .xlsm, .xls"
        :auto-upload="false"
        action="#"
        :limit="1"
        :file-list="fileList"
        :on-change="handleChange"
        :on-exceed="handleExceed"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerUploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import data2 from "../json/dataTable2.json";
export default {
  name: "EmployeeAttendance",
  mounted() {
    // 设置表格中的日期对应相应的日期
    let date = new Date(),
      month = date.getMonth();
    this.getEveryDay(date, month);
    // console.log(this.employee);
    // this.tableData = this.employee.slice(0, this.pageSize);
    this.getEmployeeAttendance();
  },
  data() {
    return {
      employee: [],
      total: 0,
      tableData: [],
      pageSize: 4,
      currentPage: 1,
      dayObj: {},
      fileList: [], //文件列表
      file: {},
      // 员工考勤的人数
      // employee: data2.data,
      header: {
        // empId: "序号",
        empDept: "部门",
        empName: "姓名",
        empWorkDNum: "总出勤天数",
        empWorkD: "加班天数",
        empPerRatio: "绩效比例",
        empReild: "补发上月",
        empMealSup: "餐补(天)",
        empDeductLastM: "扣除上月",
        empMissCard: "缺卡（次）",
        empAbsen: "旷工(天)",
        empPresonal: "事假(天)",
        empSick: "病假(天)",
        empAnnual: "年假(天)",
        empMaternity: "产假(天)",
        empLateNum: "迟到早退次数",
        remarks1: "备注1",
        remarks2: "备注2",
        remarks3: "备注3",
      },
      selectEmployeeName: {
        empName: "",
        empDept: "",
      },
      addialog: {
        // empId: "序号",
        // emdepartment: "部门",
        // empName: "姓名",
        empWorkDNum: "总出勤天数",
        empWorkD: "加班天数",
        empPerRatio: "绩效比例",
        empReild: "补发上月",
        empMealSup: "餐补(天)",
        empDeductLastM: "扣除上月",
        empMissCard: "缺卡（次）",
        empAbsen: "旷工(天)",
        empPresonal: "事假(天)",
        empSick: "病假(天)",
        empAnnual: "年假(天)",
        empMaternity: "产假(天)",
        empLateNum: "迟到早退次数",
        remarks1: "备注1",
        remarks2: "备注2",
        remarks3: "备注3",
      },
      // 获取添加输入框里面的内容
      addEmployeeName: {
        empId: "",
        emdepartment: "",
        empName: "",
        empWorkDNum: "",
        empWorkD: "",
        empPerRatio: "",
        empReild: "",
        empMealSup: "",
        empDeductLastM: "",
        empMissCard: "",
        empAbsen: "",
        empPresonal: "",
        empSick: "",
        empAnnual: "",
        empMaternity: "",
        empLateNum: "",
        remarks1: "",
        remarks2: "",
        remarks3: "",
      },
      // 存储编辑员工的信息
      editEmployeeName: {
        empId: "",
        emDepartment: "",
        empName: "",
        empWorkDNum: "",
        empWorkD: "",
        empPerRatio: "",
        empReild: "",
        empMealSup: "",
        empDeductLastM: "",
        empMissCard: "",
        empAbsen: "",
        empPresonal: "",
        empSick: "",
        empAnnual: "",
        empMaternity: "",
        empLateNum: "",
        remarks1: "",
        remarks2: "",
        remarks3: "",
      },
      title: "添加考勤员工的信息",
      //控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      centerAddDialogVisible: false,
      centerEditDialogVisible: false,
      labelPosition: "right",
      centerUploadDialogVisible: false,
    };
  },
  methods: {
    upload() {
      this.centerUploadDialogVisible = true;
    },
    //文件状态改变触发
    handleChange(file) {
      //(file,fileList)参数
      this.uploading = false;
      this.file = file;
    },
    //文件超出个数限制
    handleExceed() {
      this.$message.warning("仅允许上传一个文件！");
    },
    submitUpload() {
      if (!this.file.size) {
        this.$message.warning("请选择上传的文件");
        return;
      }
      // this.uploading = true;
      let formData = new FormData();
      formData.append("file", this.file.raw);
      this.$api.employeeAttendance
        .uploadEmployeeAttendanceFile(formData)
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: "上传失败,请重新上传!",
            });
          }
          console.log("李萍");
          this.getEmployeeAttendance();
        });
      this.centerUploadDialogVisible = false;
    },
    // 下载文件
    download() {
      this.$api.employeeAttendance
        .downloadEmployeeAttendanceInfo("2022年8月朗驰考勤情况", 8)
        .then((res) => {
          console.log(res);
          var content = res.headers["content-disposition"];
          var name = content && content.split(";")[1].split("filename=")[1];
          var fileName = decodeURIComponent(name);
          // console.log(fileName);
          this.$download(res.data, fileName, "text/plain");
          // console.log(res.data);
          // this.downloadFile(res.data, fileName);
        });
    },
    // 获取所有的考勤人员
    getEmployeeAttendance() {
      this.$api.employeeAttendance.getEmployeeAttendanceList().then((res) => {
        console.log(res);
        console.log(111);
        let data = res.data.data;
        // this.employee = data.records;
        this.tableData = data;
        this.total = data.length;
      });
    },
    monthChange(date) {
      this.getEveryDay(date, date.getMonth());
    },
    getEveryDay(date, month) {
      //设置月份
      date.setMonth(month + 1);
      //设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
      date.setDate(0);
      // let dayArry = [];
      let dayObj = {};
      //获取月份的某一天
      let day = date.getDate();
      for (let i = 1; i <= day; i++) {
        date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
        // dayArry.push(i + " " + this.getWeekday(date.getDay())); //选中月份的每一天和当天是星期几
        // console.log(date.getDay());
        dayObj[i] = this.getWeekday(date.getDay());
      }
      this.dayObj = dayObj;
    },
    getWeekday(day) {
      let dayArr = ["日", "一", "二", "三", "四", "五", "六"];
      // console.log(dayArr[day]);
      return dayArr[day];
    },
    // 显示添加员工信息的表单
    add() {
      this.centerAddDialogVisible = true;
    },
    // 点击编辑按钮显示编辑的信息
    editInfo(data) {
      this.centerEditDialogVisible = true;
      this.editEmployeeName = data;
      console.log(this.editEmployeeName);
    },
    //点击删除按钮删除员工信息
    deleteEmployee(data) {
      console.log(data.empId);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.employeeAttendance
            .deleteEmployeeAttendance(data.empId)
            .then((res) => {
              console.log(res);
              if (res.data.code == 212) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
              this.getEmployeeAttendance();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加该名员工的信息，发生Ajax请求
    addEmployee() {
      this.$api.employeeAttendance
        .addEmployeeAttendance(this.addEmployeeName)
        .then((res) => {
          console.log(res);
        });
      this.centerAddDialogVisible = false;
    },
    // 编辑完员工的信息后，发生请求
    showEditInfo() {
      this.centerEditDialogVisible = false;
      // console.log(this.editEmployeeName);
      this.$api.employeeAttendance
        .updateEmployeeAttendance(this.editEmployeeName)
        .then((res) => {
          console.log(res);
          if (res.data.code == 213) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: "更改数据失败",
            });
          }
          this.getEmployeeAttendance();
        });
    },
    // 接收子组件传递过来的数据
    updateTableData(tableData) {
      this.tableData = tableData;
    },
    // 分页查询请求数据
    selectPagination() {
      this.$api.employeeAttendance
        .postEmployeeAttendanceList(this.pageSize)
        .then((res) => {
          // console.log(res);
          let data = res.data.data;
          // this.employee = data.records;
          this.tableData = data;
          // this.total = data.total;
        });
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    selectEmployee() {
      this.$api.employeeAttendance
        .getEmployeeAttendanceListByObj(
          this.currentPage,
          this.pageSize,
          this.selectEmployeeName
        )
        .then((res) => {
          console.log(res);

          // if (res.data.code == 200) {
          //   let data = res.data.data;
          //   // this.employee = data.records;

          //   this.tableData = data.records;
          //   this.total = data.total;
          //   this.selectEmployeeName = {};
        });
    },
  },
};
</script>

<style scoped lang="less">
.el-table {
  opacity: 0.6;
  color: black;
  // font-weight: 700;
  font-size: 16px;
  .el-table-column {
    color: black;
  }
}
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    // width: 400px;
    margin: 0;
    padding: 0;
    .el-form-item {
      flex: 1;
    }
    .el-form-item:nth-child(3) {
      // flex: 10;
    }
  }
}
.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-dialog {
  transform: translate(-50%, 50%);
  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;
    .el-form-item {
      flex: 50%;
    }
  }
  .text {
    display: flex;
    flex-wrap: wrap;
    div {
      flex: 50%;
      span {
        display: inline-block;
        width: 100px;
        text-align: right;
        color: #606266;
      }
      textarea {
        vertical-align: middle;
        border: 1px solid #dcdfe6;
        outline: none;
      }
    }
  }
}
</style>
